import {
  ModalForm,
  ProFormSelect,
  ProFormText,
  ProFormTextArea,
} from '@ant-design/pro-components';
import { useModel } from '@umijs/max';
import React, { PropsWithChildren } from 'react';

interface UpdateFormProps {
  echoRecord: API.StaffInfo;
  children: any;
}
const UpdateForm: React.FC<PropsWithChildren<UpdateFormProps>> = ({
  echoRecord,
  children,
}) => {
  const { staffCategoryEnum, handleUpdate } = useModel(
    'Staff.model',
    (model) => ({
      handleUpdate: model.handleUpdate,
      staffCategoryEnum: model.staffCategoryEnum,
    }),
  );

  return (
    <ModalForm<API.Staff_Modify_Body>
      trigger={children}
      title="STAFF - UPDATE"
      initialValues={echoRecord}
      autoFocusFirstInput
      submitTimeout={2000}
      modalProps={{ destroyOnClose: true }}
      onFinish={async (values) => {
        const success = await handleUpdate({
          ...values,
          stf_id: echoRecord.stf_id,
        });
        return success; // 返回true MODEL FROM 自动销毁
      }}
    >
      <ProFormText
        name="stf_name"
        label="name"
        placeholder="Please input staff name"
        rules={[
          { required: true, message: 'Staff name is required!' },
          { min: 2, max: 20, message: 'Staff name length 2 - 20!' },
        ]}
      />
      <ProFormSelect
        name="stf_category"
        label="category"
        placeholder="Please select staff category"
        valueEnum={staffCategoryEnum}
        rules={[{ required: true, message: 'Please select staff category' }]}
      />
      <ProFormTextArea
        name="stf_remark"
        label="remark"
        placeholder="Please input staff remark.."
      />
    </ModalForm>
  );
};

export default UpdateForm;
